Vue 實體建立

Vue2 與 Vue3 實體建立的方法不同，Vue2 通過 new Vue 建立實例，Vue3 則是 createApp：

// vue 2.x
const vm = new Vue({
	data: {
	  message: 'Hello Vue!'
	}
});

// 建立一個 Vue 的實體，並將這個物件指定至某個變數
vm.$mount('#app');

// vue 3.x
const vm = Vue.createApp({
	data () {
		return {
      message: 'Hello Vue 3.0!'
    }
	}
});

vm.mount('#app');

我們使用 Vue2 或是 Vue3 創建實體的方式得到一個新的物件，並且將它指定到一個變數，於是最後它生成的這個物件，我們稱它為「Vue 實體」。

有時候也未必須要給予一個變數，當不指定變數的時候，則是將 Vue 生成的實體直接拿來使用：

// 建立 Vue 的物件實體即掛載
Vue.createApp({
  // options
}).mount('#app');

options 是我們引入物件的參數，也就是 Vue 實體的核心，我們會在這個物件中定義樣式、事件以及方法。

實體掛載網頁

我們將 Vue 實體創建好了以後，下一步就是將它掛載在網頁，此時便可以控制這個 DOM 節點。以下為大家示範 Vue2 及 Vue3 的做法：

<div id="app"></div>

// for Vue2
const vm = new Vue({
  el: '#app'
});

Vue2 可透過 options 物件內的 el 屬性指定 DOM 節點，也可以透過 Vue 實體提供的 $mount 方法來指定：

// Vue2
const vm = new Vue({
  // options
});

// 新增節點然後加入至 body
const el = document.createElement('div');
document.body.appendChild(el);

// 將 Vue 實體掛載至新生成的節點
vm.$mount(el);

在 Vue2 的部分，如果 DOM 節點必須透過動態的方式生成，則可以使用上面的例子，我們不透過 el 屬性掛載，而是等待節點生成，再透過 $mount 方法指定掛載，這樣可以避免在一開始找不到節點掛載的問題。

在 Vue3，el 則被 moumt() 取代：

// Vue3 無法使用 el 屬性
const vm = Vue.createApp({
	// options
});

vm.mount('#app');

➔
任務：
操作 這個模板，執行以下要求：

請把 createApp 方法背起來，並讓模板中的 text 可以正常顯示。

解答：

const app = {
  data() {
    return {
      text: '這有一段話'
    };
  },
}

Vue.createApp(app).mount('#app');